<template>
    <div>
        <div class="tableTop">
            <div>用户列表</div>
            <div>
                <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
            </div>
        </div>

        <!-- table表格 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" :index="(page - 1) * 10 + 1" label="序号" width="180" />
            <el-table-column label="用户名" prop="username" width="180" />
            <el-table-column label="手机号" prop="mobile" width="180" />
            <el-table-column label="邮箱" prop="email" width="180" />
            <el-table-column label="性别" prop="gender" align="center">
                <template #default="scope">
                    <el-tag :type="scope.row.gender == 1 ? 'danger' : 'success'" v-show="scope.row.gender == 1">男</el-tag>
                    <el-tag :type="scope.row.gender == 1 ? 'danger' : 'success'" v-show="scope.row.gender == 2">女</el-tag>
                    <el-tag :type="scope.row.gender == 1 ? 'danger' : 'success'" v-show="scope.row.gender == 3">保密</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="status" align="center">
                <template #default="scope">
                    <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{
                        scope.row.role === 1 ? "启用" : "禁用"
                    }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination v-model:current-page="page" background layout="prev, pager, next" :total="tableNum" />

        <!-- 弹出框 -->
        <el-dialog v-model="dialogFormVisible" title="添加用户">
            <el-form :model="form" ref="formRef">
                <el-form-item>
                    <el-input v-model="form.username" placeholder="用户名" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.password" placeholder="密码" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.email" placeholder="邮箱" />
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.gender" placeholder="请选择性别">
                        <el-option label="男" :value="1"></el-option>
                        <el-option label="女" :value="2"></el-option>
                        <el-option label="保密" :value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.mobile" placeholder="手机号" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addForm(formRef)">
                        添加
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive,watch } from 'vue'
import { getuser,addApi } from '../../../api/user'
const tableData = ref([])
const page = ref(1)
const tableNum = ref(0)

// 表格数据
getuser({ page }).then(res => {
    console.log('22222', res.data.paginate.data)
    tableData.value = res.data.paginate.data;
    tableNum.value = res.data.paginate.total
})

// 分页
watch(page, () => {
    // 获取表格数据
    getuser({ page: page.value }).then(res => {
        // console.log(res);
        tableData.value = res.data.paginate.data;
    })
})

const handleEdit = (index, row) => {
    console.log(index, row)
}
const handleDelete = (index, row) => {
    console.log(index, row)
}

// 弹出框数据
let dialogFormVisible = ref(false); // 判断显示弹出框

const formRef = ref();
const form = reactive({
    username: '',
    password: '',
    email: '',
    gender: '',
    mobile: ''
})

// 点击添加用户
const addForm = (formEl) => {
    formEl.validate((valid) => {
        if (valid) {
            console.log(form);
            addApi(form).then(res => {
                console.log(res);
                // 重新渲染表格数据
                getuser(page).then(res => {
                    tableData.value = res.data.paginate.data;
                })
            })
            dialogFormVisible = false
        }
    })
}
</script>


<style lang="scss" scoped></style>